var WIDTH;
var HEIGHT;

var canvas;
var context;

var mouse = {x: 0, y: 0};
var snows = [];

function init(){
	//web font
	var link = document.createElement('link');
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = "http://fonts.googleapis.com/css?family=Snowburst+One&subset=latin,latin-ext";
	document.querySelector('head').appendChild(link);

	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;

	mouse.x = WIDTH/2;
	mouse.y = HEIGHT/2;

	canvas = document.querySelector('canvas');

	canvas.width = WIDTH;
	canvas.height = HEIGHT;

	canvas.addEventListener('mousemove', mouseHandler, false);

	context = canvas.getContext('2d');

	context.fillStyle = "black";
	context.fillRect(0, 0, WIDTH, HEIGHT);

	var message = "";
	var msg = "Merry X-mas\nand happy new year\n\nGood bye 2012 and Welcome 2013";
	var msg2 = "\n\nI love you Nya-!\nYou're my best person in my life";

	function gameLoop(){
		context.save();

		context.fillStyle = "rgba(10,10,10,0.7)";
		context.fillRect(0, 0, WIDTH, HEIGHT);

		//draw hint
		context.fillStyle = "white";
		context.font = "13px Arial";
		context.textBaseline = "top";
		context.textAlign = "left";
		context.fillText("Move your mouse to change wind direction", 5, 5);

		//Draw msg

		context.strokeStyle = "#ffcccc";
		context.textAlign = "center";
		context.textBaseline = "middle";
		context.font = '34px "Snowburst One"';
		context.shadowColor = "white";
		context.shadowBlur = 3;

		var lines = (message.length == 0 || message.length == msg.length || message.length == msg.length+msg2.length?message:message+'|').split('\n');
		for(var i=0; i<lines.length; i++){
			var y = (i-(lines.length-1)/2) * 34;
			context.strokeText(lines[i], WIDTH/2, HEIGHT/2 + y);
		}

		context.restore();

		for(var i=0; i<snows.length; i++){
			var snow = snows[i];
			snow.move();
			if(snow.isOver()){
				snows.splice(i, 1);
				i--;
				//snow.constructor.call(snow);
			}else{
				snow.draw();
			}
		}
	}

	function addSnow(){
		//OMG.. it's hell when snows more than 120
		//so I don't make snow 
		if(snows.length > 100){
			return;
		}

		if(Math.random() < 0.003){
			snows.push(new Meteor());
		}else{
			snows.push(new Snow());
		}
	}

	function addMsg(){
		if(message.length < msg.length){
			message = msg.substring(0, message.length + 1);
		}else{
			message = msg + msg2.substring(0, message.length - msg.length + 1);
		}

		if(message.length == msg.length){
			setTimeout(addMsg, 6000);
		}else{
			if(msg[message.length] == '\n'){
				setTimeout(addMsg, 900);
			}else if(message.length != msg.length + msg2.length){
				setTimeout(addMsg, 180);
			}
		}
	}

	setInterval(gameLoop, 30);
	setInterval(addSnow, 15);
	setTimeout(addMsg, 3000);
}

Snow = function(){
	this.x = Math.random()*WIDTH;
	this.y = 0;

	this.color = "rgba(255, 255, 255, "+(Math.random()*0.3 + 0.7)+")";

	this.size = Math.floor(Math.random()*10) + 3;
	this.vx = (Math.random()-0.5) * 4;
	this.vy = Math.random() * 4 + 1;

	this.points = [];
	for(var i=0; i<3; i++){
		this.points.push(Math.random()-0.5);
		this.points.push(Math.random()-0.5);
		this.points.push(Math.random()-0.5);
		this.points.push(Math.random()-0.5);
	}
}

Snow.prototype.move = function(){
	this.vx += Math.random()-0.5;
	this.vy += Math.random()-0.5;

	if(this.vx < -4) this.vx = -4;
	else if(this.vx > 4) this.vx = 4;
	if(this.vy < 1) this.vy = 1;
	else if(this.vy > 5) this.vy = 5;

	this.x += this.vx + (mouse.x-WIDTH/2)/WIDTH * 10;
	this.y += this.vy + (mouse.y-HEIGHT/2)/HEIGHT * 5;
}

Snow.prototype.isOver = function(){
	if(this.x < 0 || this.x > WIDTH){
		return true;
	}else if(this.y > HEIGHT || this.y < 0){
		return true;
	}else{
		return false;
	}
}

Snow.prototype.draw = function(){
	context.save();

	context.translate(this.x, this.y);

	context.shadowBlur = this.size;
	context.shadowColor = this.color;

	context.strokeStyle = this.color;
	context.lineWidth = this.size/6;
	context.beginPath();
	var i=0;
	while(i < this.points.length){
		context.moveTo(this.points[i++]*this.size, this.points[i++]*this.size);
		context.lineTo(this.points[i++]*this.size, this.points[i++]*this.size);
	}
	context.closePath();
	context.stroke();

	context.restore();
}


Meteor = function(x, y, vx, vy){
	this.x = x?x:Math.random()*WIDTH;
	this.y = y?y:0;
	this.vx = vx?vx:(Math.random()-0.5)*20;
	this.vy = vy?vy:Math.random() * 10 + 10;
}

Meteor.prototype.move = function(){
	this.x += this.vx;
	this.y += this.vy;
}

Meteor.prototype.isOver = function(){
	if(this.x < 0 || this.x > WIDTH){
		return true;
	}else if(this.y < 0 || this.y > HEIGHT){
		return true;
	}else{
		return false;
	}
}

Meteor.prototype.draw = function(){
	context.save();

	context.fillStyle = "#ffcccc";
	context.shadowColor = "dddddd";
	context.shadowBlur = 2;

	for(var i=0; i<10; i++){
		context.beginPath();
		context.arc(this.x - this.vx*i/3, this.y - this.vy*i/3, 2-i/5, 0, Math.PI*2, false);
		context.closePath();
		context.fill();
	}
	context.restore();
}

//handlers
function resizeHandler(event){
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
}

function mouseHandler(event){
	mouse.x = event.pageX;
	mouse.y = event.pageY;
}

window.addEventListener('load', init, false);
window.addEventListener('resize', resizeHandler, false);
